<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.tab input {width:200px;height:50px;background:palegreen;}
		.tab .active {background:yellow;}
		.tab div {width:200px; height:200px;  display:none;}
	</style>
	<body>
		<div class="tab" id="tab">
	    <input class="active" type="button" value="one" />
	    <input type="button" value="two" />
	    <input type="button" value="three" />
	    <div style="display:block;">内容一</div>
	    <div>内容二</div>
	    <div>内容三</div>
		</div>
		<script>
			//构造函数模式 
		//小明 今年18岁 性别男 有男朋友 男朋友会说话 说什么自己定
	//工厂模式
		//造一辆车 出厂 （合格证/建议零售价/说明书）
		window.onload=function(){
		    var oTab=new TabSwitch("tab");
		}
		function TabSwitch(id)
			{
			    var oDiv=document.getElementById(id);
			    this.aBtn=oDiv.getElementsByTagName('input');
			    this.aDiv=oDiv.getElementsByTagName('div');
			    var i=0;
			    var _this=this;          //this是new出来的对象，即oTab
			    for(i=0;i<this.aBtn.length;i++)
		    {
		        this.aBtn[i].index=i;
		        this.aBtn[i].onclick=function(){
		            _this.tab(this);    //通过参数的形式，将被点击的按钮传到下面去
		        };
	    }
	};
		TabSwitch.prototype.tab=function(oBtn){
		    for(i=0;i<this.aBtn.length;i++)
		    {
		        this.aBtn[i].className='';
		        this.aDiv[i].style.display='none';
		    }
		    oBtn.className='active';    //要被点击的按钮改变，而不是new出来的对象，所以这里不用this
		    this.aDiv[oBtn.index].style.display='block';
		}
		</script>
	</body>
</html>
